<template>
    <div style="display: flex">
        <!--<el-button type="primary" style="margin-right: 15px" @click="addItem">新增</el-button>-->
        <el-input v-model="search" placeholder="请输入课程名称"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <!--对应按键-->
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>
    <div>
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
            <el-table-column prop="stuName" label="学员姓名" align="center" width="auto" />
            <el-table-column prop="stageNum" label="档期编号" align="center" width="auto" />
            <el-table-column prop="courseName" label="课程名称" align="center" width="auto" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="auto" />
            <el-table-column label="操作" fixed="right" align="center" width="200">
                <template v-slot="scope">
                    <div>
                        <el-button type="success" size="small" icon="view" @click="toStuHonorPage(scope.row)">查看</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!--分页栏-->
    <div style="margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog :close-on-click-modal="false" title="证书操作" v-model="dialogVisible" width="730" @close="reset()">
        <!-- 添加 v-if 确保对话框内容重新渲染 -->
        <StuHonorPage v-if="dialogVisible" :rowData="currentRowData" />
    </el-dialog>
</template>

<script>
    import request from "~/utils/request.js";
    import StuHonorPage from '~/pages/userInfo/stuHonorPage.vue';

    export default {
        components: {
            StuHonorPage
        },
        data() {
            return {
                dialogVisible: false, // 控制对话框显示
                form: {}, // 编辑表单数据
                //分页设置
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                search: '',
                stuId: '',
                currentRowData: null,
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                request.get("/stu-honor/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&name=" + this.search + "&stuId=" + this.$store.state.user.id).then(res => {
                    if (res.code === '200') {
                        this.tableData = res.data.records
                        this.total = res.data.total
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            toStuHonorPage(scope) {
                console.log("传递的数据:", scope); // 添加日志查看传递的数据
                this.currentRowData = scope; // 将当前行数据保存到变量中
                this.dialogVisible = true;
            },
            reset(val) {
                this.dialogVisible = false;
                this.form = {};
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
        }
    }
</script>

<style scoped></style>
